<template>
    <div id="centerRight2_1">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span>
                    <icon name="align-left" class="text-icon"></icon>
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">产品销售渠道分析</span>
                    <div class="decoration2">
                        <dv-capsule-chart :config="config" style="width:300px;height:200px" />
                    </div>
                </div>
            </div>
            <div>
                <CenterRight2_1 />
            </div>
        </div>
    </div>
</template>

<script>
import CenterRight2_1 from "@/components/echart/centerRight/centerRight2_1";
export default {
    data() {
        return {
            config: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            }
        }
    },
    components: {
        CenterRight2_1
    }
}
</script>

<style lang="scss" class>
.text-icon {
    background-color: #fff;
}

$box-height: 520px;
$box-width: 100%;

#centerRight2_1 {
    padding: 14px 16px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-color-black {
        height: $box-height - 30px;
        border-radius: 10px;
    }

    .text {
        color: #c3cbde;
    }

    .body-box {
        border-radius: 10px;
        overflow: hidden;

        .dv-cap-chart {
            width: 100%;
            height: 160px;
        }
    }
}
</style>
